<template>
    <!-- 登录前 -->
    <div class="bigbox">消息信息</div>
    <div v-if="channel.setIsLogin===false">
      <van-button plain type="primary" class="but" @click="login">登录后查看数据</van-button>
    </div>

<!-- 下面的导航栏页面 -->
 <div v-if="channel.setIsLogin===true">
 <div class="box" v-for="item in channel.messagedata" :key="item.id" @click="message(item.id)">
    <div class="box1">
        <img class="img" :src="item.img" alt="cw">
    </div>
    <div class="wz1">{{item.name}}</div>
    <div class="wz2">{{ item.message }}</div>
    <div class="wz3">{{ item.date }}</div>
 </div>
 <!-- 导航栏 -->
</div>
<van-tabbar v-model="active" style="z-index: 1;">
  <van-tabbar-item icon="home-o" :to="{path:'/'}">主页</van-tabbar-item>
  <van-tabbar-item icon="search" :to="{path:'/classify/classify1'}">分类</van-tabbar-item>
  <van-tabbar-item icon="browsing-history-o" :to="{path:'/life'}">数据</van-tabbar-item>
  <van-tabbar-item icon="comment-o" :to="{path:'/message'}">消息</van-tabbar-item>
  <van-tabbar-item icon="setting-o" :to="{path:'/car'}">购物车</van-tabbar-item>
  <van-tabbar-item icon="friends-o" :to="{path:'/mine'}">我的</van-tabbar-item>
</van-tabbar>
</template>

<script setup>
import { ref } from 'vue';
import { useCounterStore } from '../../stores/counter'
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const channel = useCounterStore()
 const active = ref(3)

  

  //挂载时执行执行，切换底部导航栏的时候返回到页面的最上端
  onMounted(() => {
  window.scrollTo(0,0)
})


const message = (id) => {
  router.push(`/chat?id=${id}`)
}
</script>

<style scoped>
 .bigbox{
    width: 100%;
    height: 50px;
    color:grey;
    font-family:serif;
    text-align: center;
    border-bottom: 1px solid grey;
    line-height: 50px;
    font-size: 20px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
 }
 .box{
    width: 98%;
    height: 70px;
    border: 1px solid rgb(206, 206, 206);
    background-color: white;
    margin-left: 1%;
    margin-top: 1%;
    border-radius: 10px;
 }
 .box1{
    width: 15%;
    height: 60px;
    border-radius: 50%; 
    overflow: hidden;
    margin-top: 5px;
    margin-left: 5%;
    float: left;
 }
 .img{
    width: 100%;
    height: 100%;
 }
 .wz1{
    font-size: 18px;
    margin-left: 5%;
 }
 .wz2{
    font-size: 15px;
    margin-top: 10px;
    margin-left: 5%;
 }
 .wz3{
    font-size: 13px;
    float: right;
 }
 .but{
    width: 60%;
    height: 50px;
    margin-top: 106px;
    margin-left: 74px;
  }
</style>